<template>
    <div id="app">
        <router-view/>
        <div class="bao">
            <h1>爆爆团</h1>
            <p>限时爆款 超级低价</p>
        </div>
      <ul>
          <li v-for="(item,index) in title" :key="index" @click="font(index)">{{item}}</li>
      </ul>
      <h1 v-if="good.length==0">暂无商品上新</h1>
      <div class="all">
        <div class="good" v-for="(item,index) in good" :key="index">
          <div class="left">
              <img :src="item.picture" alt="">
          </div>
          <div class="right">
              <p>{{item.name}}</p>
              <p>{{item.name}}</p>
              <p>爆爆团价</p>
              <p>
                <span>￥{{item.min_price}}</span>
                <button @click="hand(index)">{{num==index?"已抢":"马上抢"}}</button>
              </p>
              <p><span>{{item.promotion_info}}</span>
              <span>已售{{item.month_saled}}份</span></p>
          </div>
      </div>
      </div>
      
    </div>
  </template>
  
  <script>
  import { tuanList } from '../../utils/service'
  
  export default {
  data(){
      return {
          go:true,
          title:["正在抢购","上新预告"],
          good:[],
          num:0
      }
  },
  mounted(){
  tuanList({status:0}).then((res)=>{
      console.log(res.data)
      this.good=res.data.list
  })
  },
  methods:{
      hand(index){
          this.num=index
      }
  }
  }
  </script>
  
  <style lang="scss" scoped>
  .bao {
width: 100%;
height: 220px;
overflow: hidden;
background:linear-gradient(rgb(238, 68, 6),rgb(255, 174, 0))
}
.bao h1 {
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #fff;
    font-size: 24px;
    font-style: italic;
    margin-top: 10px;
}
.bao p {
    text-align: center;
    font-size: 28px;
    color: rgb(243, 206, 170);
    margin-top: 40px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
  #app h1 {
      text-align: center;
      line-height: 50px;
  }
  ul {
      margin-left: 16px;
      position: absolute;
  top: 164px;
  }
  ul>li{
      float: left;
      padding: 0 6px;
      color: #fff;
      list-style: none;
      font-weight: bold;
  }
  .good{
      width: 90%;
      height: 167px;
      margin: 0 5%;
      margin-bottom: 10px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      background: #fff;
  }
  .left {
      float: left;
  }
  .right {
      float:left;
      margin-left: 10px;
  }
  .left img {
      width: 97px;
      height: 126px;
  }
  .right p:nth-child(1){
      color: #999;
      padding: 6px 0;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .right p:nth-child(2){
      font-size: 18px;
      font-weight: bold;
      width: 200px;
     white-space: nowrap;
      overflow: hidden;
      padding-bottom: 10px;
      text-overflow: ellipsis;
  }
  .right p:nth-child(3){
      color: red;
      font-size: 13px;
      margin-bottom: 4px;
  }
  .right p:nth-child(4){
    display: flex;
    justify-content: space-between;

  }
  .right p:nth-child(4) span {
     color: red;
      font-weight: bold;
      font-size: 18px;
  }
  .right p:nth-child(4) button {
    background: rgb(230, 63, 12);
      border: none;
      outline: none;
      height: 32px;
      border-radius:32px ;
      width: 78px;
      color: #e1e1e1;
      text-align: center;
  }

  .right p:nth-child(5) {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
  }
  .right p:nth-child(5) span:nth-child(1){
      color: #999;
      font-size: 13px;
  }
  .right p:nth-child(5) span:nth-child(2){
      color: crimson;
      font-size: 13px;
      margin-right: 10px;
  }
  #app {
      padding-bottom: 50px;
  }
  .all {
    background-color: #eee;
  }
  </style>